import React from 'react'
import '../css/Todolist.css'
import {PENDDING} from "./confing"
class TodolistBar extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div className="todo_box_container">
                <div className="todo_box_wrapper">
                    <div className="todo_container">
                        <div className="todo_title">
                            ToDoList
                    </div>
                        <div className="todo_input_container">
                            <input placeholder="添加ToDo" 
                            ref="input"
                            onKeyDown={(event)=>{
                                var keyCode = event.keyCode;
                                // console.log(keyCode);
                                 var value = this.refs.input.value
                                if(event.keyCode === 13){
                                    if(value.length === 0){
                                        alert("输入内容不能为空")
                                        return 
                                    }
                                    var todo ={
                                        content:value,
                                        status:PENDDING // 未经定义的魔法值
                                    }
                                    this.props.addTodo(todo)
                                    this.refs.input.value = ""
                                }
                                
                            }} />
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
export default TodolistBar